<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<title>测测你是不是lol中的老司机</title>

<script src="lib/easeljs-0.8.2.min.js"></script>
<script src="lib/tweenjs-0.6.2.min.js"></script>
<script src="lib/movieclip-0.8.0.min.js"></script>
<script src="lib/preloadjs-0.6.2.min.js"></script>
<script src="LolGuessGame.js?r=8"></script>
<script src="lib/wx-funding.js"></script>
<script src="main.js?r=16"></script>
<!-- 流量监测 -->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?31d3761574708e8b268b2a9251906bb7";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


<style>
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    }

    body, p, input {
        margin: 0px;
        padding: 0px;
    }

    .canvasCon {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
    }

    canvas {
        width: 100%;
        height: 100%;
        background: transparent;
    }

    .loading {
        width: 16px;
        height: 16px;
        margin: 0 auto;
        margin-top: 50%;
    }

    /*inforForm*/
    .infoForm {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 4;
        width: 640px;
        height: 350px;
        text-align: center;
        color: #fff;
        display: none;
    }
    .infoForm .infoFormBd{
        width:488px;
        height: 100%;
        margin: 0 auto;
    }
    .infoForm form {
        width: 100%;
        margin: 0 auto;

    }

    .infoForm input {
        display: block;
        width: 100%;
        height: 80px;
        line-height: 80px;
        background: #271618;
        color: #fff;
        margin: 1px auto 0 auto;
        font-size: 150%;
        text-indent: 20px;
        border: none;
    }

    .infoForm form a.btn {
        display: block;
        margin-top: 20px;
        -webkit-tap-highlight-color: transparent;
    }
    /*end*/
    .end {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 5;
        width: 640px;
        height: 250px;
        text-align: center;
        color: #fff;
        display: none;
    }
    .end .infoFormBd{
        width:488px;
        height: 100%;
        margin: 0 auto;
    }
    .end a.btn {
        display: block;
        margin-top: 20px;
        -webkit-tap-highlight-color: transparent;
    }
    /*share*/
    .share{
        position: absolute;
        top:0;
        left:0;
        z-index: 1000;
        width:100%;
        height: 95%;
        background: rgba(0,0,0,0.8);
        text-align: right;
        padding-top: 5%;
        display: none;
    }
    /*tips*/
    .tips{
        position: absolute;
        top:0;
        left:0;
        z-index: 999;
        width:100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
    }
    .show{
        display: block;
    }
    /*tips*/
    .tips .con{
        position: absolute;
        left:10%;
        top: 40%;
        width:80%;
        height: auto;
        border-radius: 5px;
        background: #242f51;
        color: #fff;
        text-align: center;
    }
    .tips .con .msg{
        padding: 30px 20px;
        font-size: 150%;
        border-bottom: 1px solid #2f3a5b;
    }
    .tips .con .btn{

    }
    .tips .con .btn a{
        display: block;
        padding: 20px 0px;
        font-size: 130%;
        text-decoration:none;
        color: #fff;
    }
</style>
</head>

<body onload="init();" style="background-color:#000">
<div class="canvasCon">
    <canvas id="mainCanvas" width="640" height="1050"></canvas>
</div>

<!-- 个人信息 -->
<div class="infoForm" id="infoForm">
   <div class="infoFormBd">
        <form action="http://hbweixin.twomi.cn/api_lol/apply" method="POST" id="js_frm_submit2"
              onsubmit="submitForm(this); return false;">
            <input id="customer_name" type="text" name="customer_name" placeholder="请输入姓名"/>
            <input id="customer_phone" type="tel" name="customer_phone" placeholder="请输入电话"/>

            <p style="margin-top:20px;">
                <a class="btn" href="javascript:void(0);" onclick="submitForm(getEl('js_frm_submit2'));"><img src="images/btn-submit.jpg" /></a>
            </p>
        </form>
   </div>
</div>
<!-- 结束按钮 -->
<div class="end" id="end">
    <div class="infoFormBd">
        <p style="font-size:150%;">您的试用申请已提交成功!</p>
        <p style="margin-top:30px;">
            <a class="btn" href="javascript:void(0);" onclick="getEl('share').style.display='block';"><img src="images/btn-share.jpg" /></a>
        </p>
    </div>
</div>
<!-- 分享 -->
<div class="share" id="share" ontouchstart="this.style.display='none';">
    <img src="images/share.png" />
</div>

<!-- 提示 -->
<div class="tips" id="tips">
    <div class="con">
        <div class="msg" id="msg">请选择答案</div>
        <div class="btn"><a href="javascript:void(0);" ontouchstart="closeMsg();">关闭</a></div>
    </div>
</div>

<!-- 背景音乐显示-->
<div style="display: none">
    <audio id="music_audio_bg" preload="preload" loop="loop" style="display: none;">
        <source src="sounds/bgm.mp3" type="audio/mpeg">
    </audio>
</div>

<script type="text/javascript">
    document.body.ontouchmove = function (e) {
        e.preventDefault();
    }
</script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://hbweixin.twomi.cn/2016/accessToken/signPackage.php"></script>

</body>
</html>
